<template>


  <div>
    <div style="margin: 20px;">
      <!-- router-link不刷新页面跳转 -->
      <router-link to="/test">通过router跳转到test页面</router-link>
      <a href="/test" style="margin-left: 20px;">通过a标签跳转到test页面</a>
    </div>

    <div style="margin: 20px;">
      <!-- push跳转后可以返回 -->
      <!-- replace跳转后不能返回 -->
      <el-button type="primary" @click="router.push('/manager/test')">push编程式的跳转</el-button>
      <el-button type="primary" @click="router.replace('/manager/test')">replace编程式的跳转</el-button>
    </div>

    <div style="margin: 20px;">
      <el-button type="primary"
        @click="router.push('/manager/test?id=1&name=zhaokai')">路由传参id=1&name=zhaokai</el-button>
      <el-button type="primary"
        @click="router.push({ path: '/manager/test', query: { id: 2, name: 'zhaokai' } })">对象路由传参id=1&name=zhaokai</el-button>

    </div>


    <div style="margin-bottom: 20px;">
      <!-- disabled禁用表单 -->
      <!-- readonly只读 -->
      <!-- :prefix-icon前缀图标 :suffix-icon后缀图标 需要单独导入图标-->
      <el-input v-model="data.input" style="width: 240px" placeholder="请输入内容：" :prefix-icon="Search" />{{ data.input }}

      <el-input type="textarea" v-model="data.descr" :suffix-icon="Calendar" style="width: 200px;"></el-input>

      <el-input v-model="data.descr" :suffix-icon="Calendar" style="width: 200px;"></el-input>

      <div style="margin-bottom: 20px;">
        <!-- select多选框 -->
        <el-select multiple value-key="value" v-model="data.value" placeholder="请选择水果" size="large"
          style="width: 240px">
          <!-- v-for里key是唯一的 -->
          <el-option v-for="item in data.options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </div>

    <div style="margin: 20px;">
      <el-radio-group v-model="data.sex">
        <!-- 单选按钮 -->
        <el-radio value="男">男</el-radio>
        <el-radio label="女">女</el-radio>
      </el-radio-group> <span style="margin: 30px;"></span>{{ data.sex }}
    </div>
    <div style="margin: 20px 0;">
      <el-radio-group style="margin-left: 100px;" v-model="data.tag" size="large">
        <!-- 单选按钮 -->
        <!--v-model绑定的是value值,要对应上  -->
        <el-radio-button value="1" label="我发布的内容" />
        <el-radio-button value="2" label="我点赞的内容" />
        <el-radio-button value="3" label="我收藏的内容" />
      </el-radio-group>
    </div>
    <div style="margin: 20px 0;">
      <!-- 多选框,数组里面存储的是value绑定的值 -->
      <el-checkbox-group v-model="data.checkList">
        <el-checkbox v-for="item in data.options" :key="item.id" :label="item.label" :value="item.label" />
      </el-checkbox-group>
      <span style="margin: 20px;">{{ data.checkList }}</span>
    </div>

    <div style="margin: 20px 0;">
      <img src="@/assets/logo.svg" alt="" style="width: 100px;">
      <!-- 图片渲染，放大缩小 -->
      <!--使用网络图片地址可以加载图片，使用本地图片地址不可以加载图片  -->
      <el-image src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" alt=""
        style="width: 300px;margin-left: 20px;" />
      <!-- 使用本地图片地址,必须先导入 -->
      <el-image :src="img" alt="" style="width: 100px;margin-left: 100px;"
        :preview-src-list="[img, 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',]" />
    </div>
    <div style="margin: 20px 0;">
      <!-- 轮播图 -->
      <el-carousel height="500px" style="width: 400px;">
        <el-carousel-item v-for="item in data.imgs" :key="item">
          <img :src="item" alt="" style="width: 100%;height: 100%;">
        </el-carousel-item>
      </el-carousel>
    </div>

    <div style="margin: 20px 0;">
      <el-date-picker v-model="data.date" type="date" placeholder="请选择日期"  />{{ data.date }}



    </div>
  </div>

</template>

<script setup>
import { reactive } from 'vue'
import { Calendar, Search } from '@element-plus/icons-vue'
import router from '@/router'
import img from '@/assets/logo.svg'
import img1 from '@/assets/1.png'
import img2 from '@/assets/2.png'
import img3 from '@/assets/3.png'
import request from '@/utils/request.js'


const data = reactive({
  input: "赵凯累了",
  value: '',
  descr: "赵凯是个好人赵凯是个好人赵凯是个好人赵凯是个好人赵凯是个好人赵凯是个好人赵凯是个好人赵凯是个好人赵凯是个好人",
  options: [
    { value: 'option1', label: '苹果' },
    { value: 'option2', label: '香蕉' },
    { value: 'option3', label: '桃子1' },
    { value: 'option4', label: '桃子2' },
  ],
  employList: [],
  sex: '',
  tag: '3',
  chickList: [],
  imgs: [img1, img2, img3],
  date: '',
})
request.get('/employee/selectAll').then(res => {
  data.employList = res.data //res.data是员工的列表数据是一个数组
  console.log(res)
})

</script>